Vue.component('emojipicker',{
	template: `<div class="emoji_picker">
		<div class="picker_container">
			<div class="category" v-for="category in categories()" :key="'category' + category">
				<span>{{ category }}</span>
				<div class="emojis_container">
					<button @click="handleEmojiClick($event, emoji)" v-for="(emoji, index) in category_emojis(category)" :key="'emoji'+index">
						{{ emoji }}
					</button>
				</div>
			</div>
		</div>
		<div class="bottom_arrow" v-if="show_arrow"></div>
	</div>`,
	data(){
		return{
			EmojiData:[],
			show_arrow:true,
		}
	},
	methods:{
		/**
		 * 返回emoji表情数据
		 */
		categories(){
			return Object.keys(this.EmojiData);
		},
		/**
		 * 返回每个下标对应的数据
		 * @param [string] category  [emoji数据的下标]
		 */
		category_emojis(category) {
			return Object.values(this.EmojiData[category]);
		},
		/**
		 * 返回用户点击的表情
		 * @param [object] e  [当前触发事件的对象]
		 * @param [string] emoji  [用户选中的表情] 
		 */
		handleEmojiClick(e, emoji){
			e.preventDefault();
			//自定义事件，返回给父组件用户选中的emoji表情
			this.$emit('emoji_click', emoji);
		}
	},
	mounted(){
		/**
		 * 页面加载完毕自动获取emoji表情数据
		 */
		axios.get('./DataTest.php')
			.then(response => {
				this.EmojiData=response.data;
				console.log(this.EmojiData["FrequentlyUsed"]);
				console.log(typeof this.EmojiData);
			})
			.catch(function(error) {
				console.log(error);
			})
	}
})